<div v-cloak id="app" class="main-content">
    <div class="form-body">
        <one-form :config="config" v-model="fdata" ref="ruleForm">
            <div slot="menuLeft">
                <el-button
                    class="button-item"
                    :loading="btnLoading"
                    type="primary"
                    @click="store('ruleForm')"
                    size="small"
                >
                    保存
                </el-button>
                <el-button size="small" @click="backpage()">返回</el-button>
            </div>
            <!-- 富文本 -->
            <template slot="goods_content" slot-scope="scope">
                <one-editor
                    ref="editor"
                    v-model="fdata.goods_content"
                    @change="getEditor"
                    height="500"
                ></one-editor>
            </template>
            <!-- 上传图片 -->
            <template slot="goods_img" slot-scope="scope">
                <one-img-cell
                    v-model="fdata[scope.row.prop]"
                    :img-cell-item-style="{width:'100px',height: '100px',}"
                    :max="1"
                ></one-img-cell>
            </template>
            <template
                slot="form-item-end"
                slot-scope="scope"
                v-if="scope.row.tip"
            >
                <span style="left: 400px; position: absolute; font-size: 12px">
                    {{scope.row.tip}}
                </span>
            </template>
        </one-form>
    </div>
</div>
{include file='common@components/one-editor'} {include
file='common@components/one-form'} {include
file='common@components/one-img-cell'}
<script>
    const _formData = {:json_encode((array)$formData, 1)} ;
    const app = new Vue({
        el: "#app",
        data() {
            return {
                uploading:false,
                loading:false,
                btnLoading:false,
                config: {
                    formdesc: [
                        {
                            label: "商品名 :",
                            prop: "goods_name",
                            type: "input",
                            rules:[{ required: true, message: "商品名不能为空"}],
                            bind: {
                                "placeholder": "请输入商品名",
                            },
                        },
                        {
                            label: "商品图片 :",
                            prop: "goods_img",
                            type: "image",
                            slot: true,
                        },
                        {
                            label: "商品简介 :",
                            prop: "goods_des",
                            type: "textarea",
                        },
                        {
                            label: "商品金额 :",
                            prop: "price",
                            type: "input",
                            content: '单位：元；',
                            rules:[{pattern: /^\d+(\.+\d{0,2})?$/, message: "单位：元；商品金额为数字，两位小数，例如：50.00"},{required: true, message: '请填写商品金额'}],
                        },
                        {
                            label: "商品折扣价 :",
                            prop: "limit_price",
                            type: "input",
                            content: '单位：元；',
                            rules:[{pattern: /^\d+(\.+\d{0,2})?$/, message: "单位：元；商品折扣价为数字，两位小数，例如：50.00"}],
                        },
                        {
                            label: "商品状态 :",
                            prop: "status",
                            type: "radio",
                            options:[
                                {
                                    label: '上架',
                                    value: 1
                                },
                                {
                                    label: '下架',
                                    value: 0
                                }
                            ],
                        },
                        {
                            label: "商品详情 :",
                            prop: "goods_content",
                            type: "richtext",
                        },
                    ],
                    labelWidth:"200px",
                    rowSize: 1, //一行可以展示几列表单，默认为3列
                },
                fdata:{
                    id: '',
                    goods_name: '',
                    goods_des: '',
                    goods_content: '',
                    goods_img: '',
                    price: '0.00',
                    limit_price: '0.00',
                    status: 1
                },
            }
        },
        created() {
        },
        mounted(){
            if (Object.keys(_formData).length > 0) {
                for(let key in this.fdata){
                    this.fdata[key] = _formData[key];
                }
            }
        },
        methods: {
            getEditor(value) {
                this.fdata.goods_content = value;
            },
            //表单验证
            getFormPromise(form) {
                return new Promise(resolve => {
                    form.validate(res => {
                        resolve(res);
                    })
                })
            },
            store(formName) {
                let _this = this;
                // 获取到组件中的form
                const configForm = this.$refs.ruleForm.$refs.ruleForm;
                // 使用Promise.all去校验结果,可加入多个表单
                Promise.all([configForm].map(this.getFormPromise)).then(res => {
                    const validateResult = res.every(item => !!item);
                    if (validateResult) {
                        _this.loading = true;
                        request({
                            params: {
                                s: "goods/index/edit"
                            },
                            method: "post",
                            data: _this.fdata
                        }).then(e => {
                            _this.loading = false;
                            if (e.data.code == 0) {
                                _this.backpage()
                            } else {
                                _this.$message.error(e.data.msg);
                            }
                        })

                    } else {
                        console.log("表单未校验通过");
                    }
                })

            },
            backpage(){
                navigateTo({
                    s: "goods/index/index",
                })
            },
            //图片上传完成
            uploadSuccess(file,prop){
                file=file.response.data.data.file
                this.fdata[prop] = file
            },
        },

    });
</script>
